<template>
	<view class="content">
		<view class="order-nav">
			<text class="order-act">全部</text>
			<text>未处理</text>
			<text>已处理</text>
		</view>
		
		<view class="service">
			<view class="order-tit">
				<text>订单号:158215151515</text>
				<text>未处理</text>
			</view>
			<view class="order-con">
				<view class="ser-con">
					<view class="ser-tit">
						<text>申诉理由</text>
						<text></text>
					</view>
					<view class="ser-des">恶意差评，不可接受</view>
				</view>				
			</view>
		</view>
<!-- 	
		<view class="nodata">
			<view class="nodata-icon">
				<text class="iconfont icon-wushuju"></text>
			</view>
			<view class="nodata-tit">暂无数据</view>
		</view>	
	 -->
	</view>
</template>
<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
.content{
	.nodata{
		margin-top: 40%;
		text-align: center;
		color:#ccc;
		.nodata-icon{
			text{
				font-size:160rpx;
			}
		}
		.nodata-tit{
			margin-top: 20rpx;
			font-size: 28rpx;
		}
	}
	.order-nav{
		display: flex;
		background-color: #fff;
		text{
			font-size: 28rpx;
			margin: 0 20rpx;
			height:80rpx;
			line-height:80rpx;
			flex: 1;
			text-align: center;
			&.order-act{
				border-bottom:2px solid $uni-text-color-active;
			}
		}
	}
	.service{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.order-tit{
			display: flex;
			justify-content: space-between;
			padding-bottom:20rpx;
			border-bottom: 1px solid #eee;
			font-size:24rpx;
			margin-bottom:20rpx;
			text{
				&:first-child{
					
				}
				&:last-child{
					font-weight: bold;
					color:$uni-text-color-active;
				}
			}
		}
		.order-bot{
			display: flex;
			justify-content: space-between;
			padding-top:20rpx;
			border-top: 1px solid #eee;
			font-size:24rpx;
			margin-top:20rpx;
			.order-price{
				text{
					&:last-child{
						font-weight: bold;
					}
				}
			}
			.order-state{
				navigator{
					display:inline-block;
					width: 120rpx;
					text-align: center;
					padding:6rpx 0;
					border: 1px solid #aaa;
					margin-left:20rpx;
					border-radius:6rpx;
					color: #aaa;
					&.order-sel{
						border: 1px solid  $uni-text-color-active;
						color: #fff;
						background-color: $uni-text-color-active;
					}
				}
			}
		}
		.order-con{
			display: flex;
			.ser-img{
				width:160rpx;
				height:160rpx;
				border-radius: 14rpx;
				background-position:50%;
				background-repeat:no-repeat;
				background-size: cover;
				margin-right: 20rpx;
			}
			.ser-con{
				flex: 1;
				.ser-tit{
					display: flex;
					justify-content:space-between;
					margin:10rpx 0;
					text{
						&:first-child{
							font-weight: bold;
							font-size:30rpx;
						}
						&:last-child{
							font-size:24rpx;
							text-align: right;
							color: $uni-text-color-grey;
						}
					}
				}
				.ser-des{
					font-size:24rpx;
					color: $uni-text-color-grey;
					margin:10rpx 0;
				}
				.ser-pri{
					display: flex;
					.ser-pri-lf{
						flex: 2;
						text{
							&:first-child{
								padding: 0 6rpx;
								color:rgb(255,225,177);
								font-size:20rpx;
								background-color: #000;
							}
							&:nth-child(2){
								font-size:32rpx;
								font-weight: bold;
								color:#ff0000;
								margin: 0 2rpx 0 15rpx;
								&::before{
									content:"￥";
									font-weight: normal;
									font-size:24rpx;
								}
							}
							&:last-child{
								font-size:20rpx;
								text-decoration: line-through;
								color: $uni-text-color-grey;
							}
						}
					}
					.ser-pri-rt{
						flex: 1;
						text-align: right;
						text{
							padding: 6rpx 12rpx;
							border-radius:10rpx;
							font-size: 26rpx;
							color: #fff;
							background-color: $uni-text-color-active;
						}
					}
				}
			}			
		}
	}
}
</style>